<template>
	<view>
		<view class="info-box" :hidden="loading" v-if="Object.keys(data).length > 0">
			<view class="info-line" v-if="field.data1 || field.data2 || field.data3 || prefix.data1 || prefix.data2 || prefix.data3">
				<view>
					<text class="info-cate" v-if="field.data1 || prefix.data1">{{prefix.data1 ? prefix.data1 : ''}}{{data[field.data1]}}</text>
					<text class="info-title" v-if="field.data2 || prefix.data2">{{prefix.data2 ? prefix.data2 : ''}}{{data[field.data2]}}</text>
				</view>
				<view class="info-hits" v-if="field.data3 || prefix.data3">{{prefix.data3 ? prefix.data3 : ''}}{{data[field.data3]}}</view>
			</view>
			<view class="info-desc" v-if="field.data4 || prefix.data4">{{prefix.data4 ? prefix.data4 : ''}}{{data[field.data4]}}</view>
			<view class="info-line" v-if="field.data5 || prefix.data5 || field.data6 || prefix.data6">
				<view>
					<text class="info-price" v-if="field.data5 || prefix.data5">{{prefix.data5 ? prefix.data5 : ''}}{{data[field.data5]}}</text>
				</view>
				<view>
					<text class="info-sale" v-if="field.data6 || prefix.data6">{{prefix.data6 ? prefix.data6 : ''}}{{data[field.data6]}}</text>
				</view>
			</view>
			<view class="info-status" v-if="field.data7 || prefix.data7">{{prefix.data7 ? prefix.data7 : ''}}{{data[field.data7]}}</view>
			<ShowForm v-if="extend" :form="data.form" :form_id="data.form_id"></ShowForm>
		</view>
		<Skeleton v-if="loading" :row="extend ? 5 : 3"></Skeleton>
	</view>
</template>

<script>
import ShowForm from "@/components/showForm"
export default {
	components: {
		ShowForm
	},
	props: {
		url : String,
		extend: {
			type : Boolean,
			default : true
		},
		field: {
			type : Object,
			default : {}
		},
		prefix: {
			type : Object,
			default : {}
		},
		parserBox: {
			type : Boolean,
			default : true
		},
		swiperBox: {
			type : Boolean,
			default : true
		},
		magicBlock: {
			type : Boolean,
			default : true
		},
		postForm: {
			type : Boolean,
			default : true
		}
	},
	data() {
		return {
			loading : true,
			id : 0,
			data : {}
		}
	},
	mounted() {
		//参数优先
		//#ifdef MP
		let pages = getCurrentPages()
		let currentPage = pages[pages.length - 1]
		if(currentPage.options.id > 0){
			this.id = currentPage.options.id
		}
		//#endif
		//#ifdef H5
		if(this.$route.query.id > 0){
			this.id = this.$route.query.id
		}
		//#endif
		//缓存次级
		let id = uni.getStorageSync('product_id')
		if(id > 0){
			this.id = id
		}
		
		setTimeout(() => {
			this.loading = false
		}, 1000)
		this.loadData()
	},
	methods: {
		async loadData(){
			if(this.url){
				this.data = await this.$api('GET',this.url+'/'+this.id)
				//#ifdef MP
				let style = this.$parent.style
				//#endif
				//#ifdef H5
				let style = this.$parent.$parent.style
				//#endif
				style.forEach(v=>{
					if(v.sign == 'parserBox' && this.parserBox && this.data.detail){
						this.$set(v,'datas',this.data.detail)
					}
					if(v.sign == 'swiperBox' && this.swiperBox && this.data.pic){
						this.$set(v,'datas',[{pic:this.data.pic}])
					}
					if(v.sign == 'magicBlock' && this.magicBlock && this.data){
						this.$set(v,'datas',this.data)
					}
					if(v.sign == 'postForm' && this.postForm && this.data){
						this.$set(v,'form_id',v.form_id ? v.form_id : this.data.order_form_id)
						this.$set(v,'datas',this.data)
					}
				})
				setTimeout(() => {
					this.loading = false
				}, 100)
			}
		}
	}
}
</script>

<style lang='scss'>
	.info-box{
		position: relative;
		text-align: left;
		background-color:#fff;
		.info-title{
			width: 100%;
			font-weight: bold;
			font-size: 36upx;
			overflow: hidden;
			text-overflow: ellipsis;
			box-orient: vertical;
			color: #333;
		}
		.info-line{
			padding: 0 20upx;
			color: #999;
			display: flex;
			justify-content:space-between;
			align-items: center;
			line-height: 60upx;
			height: 60upx;
		}
		.info-cate{
			margin-right: 10upx;
			padding: 0 15upx;
			background-color: red;
			height: 40upx;
			line-height: 40upx;
			background-image: linear-gradient(to right,#9B30FF 0%,#FF00FF 100%);
			font-size: 22upx;
			color: #fff;
			border-radius: 20upx 1upx 20upx 1upx;
			white-space:nowrap;
		}
		.info-desc{
			width: 100%;
			line-height: 40upx;
			font-size: 24upx;
			color: #888;
			overflow: hidden;
			-webkit-line-clamp:2;
			text-overflow: ellipsis;
			box-orient: vertical;
		}
		.info-sale{
			text-align: right;
			font-size: 24upx;
			color: #888;
		}
		.info-price{
			font-weight: bold;
			font-size: 36upx;
			color: #45b984;
		}
		.info-money{
			text-decoration:line-through;
			margin-left: 20upx;
			font-size: 24upx;
			color: #888;
		}
		.info-hits{
			font-weight: normal;
			float: right;
			font-size: 24upx;
			color: #888;
		}
		.info-status{
			position:absolute;
			top: 20upx;
			right: 20upx;
			border: solid 10upx red;
			border-radius: 20upx;
			color: red;
			font-size: 60upx;
			font-weight: bold;
			line-height: 1;
			padding: 4upx 20upx;
			opacity: 0.5;
			transform: rotate(-10deg);
		}
	}
</style>